<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="my-info" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="flex justify-between">
      <uv-avatar @click="tapAvatar" :src="info.avatar" size="60" mr10rpx shape="square" />
      <view class="flex-1">
        <view class="mb4px">
          <text class="font-bold">{{ info.name }}</text>
          <text>（{{ lvc }}）</text>
        </view>
        <view>
          <text>性别: {{ info.sex }}</text>
          <text class="ml20px">生日: {{ info.birthday }}</text>
        </view>
      </view>
    </view>
    <view class="mt20rpx ellipsis-3" @click="showModal">
      <text font-bold>简介：</text>
      <text> {{ info.msg }} </text>
    </view>
  </view>
  <view px-4>
    <title-card title="我的父辈" more="更多" @onClick="onMore">
      <uv-scroll-list>
        <view v-for="(item, index) in info.uncles" :key="index" mr20rpx text-center>
          <uv-avatar v-if="item.avatar" :src="item.avatar" size="60" shape="square" />
          <uv-avatar v-else size="60" shape="square" :text="item.name" />
          <text>{{ item.name }}</text>
        </view>
      </uv-scroll-list>
    </title-card>
    <title-card title="我的平辈" more="更多" @onClick="onMore">
      <uv-scroll-list>
        <view v-for="(item, index) in info.peers" :key="index" mr20rpx text-center>
          <uv-avatar v-if="item.avatar" :src="item.avatar" size="60" shape="square" />
          <uv-avatar v-else size="60" shape="square" :text="item.name" />
          <text>{{ item.name }}</text>
        </view>
      </uv-scroll-list>
    </title-card>
    <title-card title="我的晚辈" more="更多" @onClick="onMore">
      <uv-scroll-list>
        <view v-for="(item, index) in info.sons" :key="index" mr20rpx text-center>
          <uv-avatar v-if="item.avatar" :src="item.avatar" size="60" shape="square" />
          <uv-avatar v-else size="60" shape="square" :text="item.name" />
          <text>{{ item.name }}</text>
        </view>
      </uv-scroll-list>
    </title-card>
  </view>
</template>

<script lang="ts" setup>
const { safeAreaInsets } = uni.getSystemInfoSync()
const info = ref({
  name: '王端',
  lv: '0',
  avatar: '/static/wangduan.png',
  birthday: '1998年03月22日',
  sex: '男',
  death: '',
  msg: '这是我的个人介绍个人介绍最低是两行数据，但是我凑不齐两行数据我不知道我怎么才能凑齐两行数据，于是我在这里胡言乱语',
  uncles: [
    { name: '王新才', avatar: '' },
    { name: '王新才', avatar: '/static/wangduan.png' },
  ],
  peers: [
    { name: '王新才', avatar: '' },
    { name: '王新才', avatar: '/static/wangduan.png' },
  ],
  sons: [
    { name: '王新才', avatar: '' },
    { name: '王新才', avatar: '/static/wangduan.png' },
  ],
})
const lvMap = ['本', '显']
const lvc = computed(() => `${lvMap[info.value.lv]}字辈`)
const tapAvatar = () => {
  uni.previewImage({
    urls: [info.value.avatar],
  })
}
const onMore = () => {
  console.log('123333')
}
const showModal = () => {
  uni.showModal({
    title: '简介',
    content: info.value.msg,
    showCancel: false,
  })
}
</script>

<style>
.my-info {
  padding: 40rpx;
  background-color: white;
  border-radius: 0 0 18px 18px;
}
</style>
